<template>
  <div class="person">
    <ul>
      <li>姓名</li>
      <li>年龄</li>
      <li>性别</li>
      <li>学号</li>
      <li>分数</li>
    </ul>
    <div v-for="item in studentList" :key="item.id">
      <h4>{{ item.name }}</h4>
      <h4>{{ item.age }}</h4>
      <input type="checkbox" checked="{item.gender ? true: false}" />男
      <h4>{{ item.studentNum }}</h4>
      <h4>{{ item.score }}</h4>
      <button @click="addScore(item)">加分</button>
      <button @click="reduceScore(item)">减分</button>
      <button @click="changeStu(item)">修改学生信息</button>
    </div>
  </div>
</template>

<script setup name="Person">
import { ref, watch } from "vue";

let studentList = ref([
  {
    id: 1,
    name: "张三",
    age: 18,
    gender: true,
    studentNum: 832304101,
    score: 80,
  },
  {
    id: 2,
    name: "李四",
    age: 22,
    gender: true,
    studentNum: 832304102,
    score: 75,
  },
  {
    id: 3,
    name: "王五",
    age: 19,
    gender: false,
    studentNum: 832304103,
    score: 60,
  },
]);

function addScore(item) {
  item.score += 1;
}

function reduceScore(item) {
  item.score -= 1;
}

function changeStu(item) {
  Object.assign(item, {
    id: 4,
    name: "钱六",
    age: 21,
    gender: false,
    studentNum: 832304104,
    score: 86,
  });
}

/*
watch(
  () => {
    item.score;
  },
  () => {
    alert("分数已修改");
  }
);
*/
</script>
<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>